<!DOCTYPE html>
<html>
	<head>
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>我的速运-注册</title>
		<link rel="stylesheet" type="text/css" href="plugins/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/public.css">
		<link rel="stylesheet" type="text/css" href="css/styleloginsign.css">
		<script src="plugins/jquery.min.js" type="text/javascript"></script>
		<script src="plugins/bootstrap.min.js" type="text/javascript"></script>
		<script src="plugins/jquery.validate.js" type="text/javascript"></script>
		<script src="js/loginsignup.js" type="text/javascript"></script>
		<!--[if IE]>
	    <script  type="text/javascript" src="js/html5.js"></script>
	    <script  type="text/javascript" src="js/respond.min.js"></script>
	    <![endif]-->
		<style>
		</style>
	</head>
	<body>
		<!--head-->
		<div class="loginnav">
			<nav class="navbar navbar-default">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand" href="#"><img src="img/icon/logo.png"></a>
						<span class="logintitle">用户注册</span>
					</div>
				</div>
			</nav>
		</div>
		<div class="container">
			<!--mainsignup-->
			<section class="mainsign">
				<div class="headnav">
				</div>
				<div class="signup">
					<div class="col-md-9 signupbox">
						<form action="customerAction_regist.action" method="post" class="bl-form bl-formhor" id="jsForm">
							<ul>
								<li class="bl-form-group">
									<label><em>*</em>手机号：</label>
									<div class="controls">
										<input type="text" id="telephone" value="" name="telephone" class="fn-tinput" placeholder="手机号" required data-rule-mobile="true" data-rule-remote="customerAction_validateTel.action" data-msg-required="请输入手机号" data-msg-mobile="请输入正确格式" data-msg-remote="手机号已经被占用！" />
									</div>
								</li>
								<li class="bl-form-group">
									<label><em>*</em>验证码：</label>
									<div class="controls">
										<input type="text" value="" name="checkcode" class="fn-tinput" placeholder="请输入验证码" required />
										<!-- 客户注册页面验证码60秒倒计时效果实现并发送请求 -->
										<input type="button"  onclick="sendCode(this)" class="btn btn-default" value="获取验证码">
										<script type="text/javascript">
											var clock = '';     //计时器
											var nums = 60;      //初始化秒
											var btn;            //获取验证码按钮
											function sendCode(thisBtn) {
												/* 因为第一项手机号不合法也会发验证码,
												这样不好,所以要验证手机号合法才能发验证码 */
												//获取手机号通过正则验证手机号是否合法
												var tel=$("#telephone").val();
												//alert(tel);
												var regex=/^1[3,5,7,8][0-9]{9}/;
												var r=regex.test(tel);
												if(r){
													//发送请求，给用户发送短信验证码
													$.post("customerAction_sendCheckcode.action",{"telephone":tel},function(data){
														if(data=='true'){
															alert('验证码发送成功，请查收！')
														} else {
															alert('验证法发送失败，请稍后再试！')
														}
													})
													btn = thisBtn;
													btn.disabled = true; //将按钮置为不可点击
													btn.value = nums + '秒后重新获取';
													/* setInterval() 以一定周期执行某个函数 */
													clock = setInterval(doLoop, 1000); //一秒执行一次    以1000为周期执行doLoop
												} else {
													alert('手机号格式有误!')
												}
											}
											function doLoop() {
												nums--;
												if (nums > 0) {
													btn.value = nums + '秒后重新获取';
												} else {
													clearInterval(clock); //清除js定时器
													btn.disabled = false;
													btn.value = '重新获取验证码';
													nums = 60; //重置时间
												}
											}
										</script>
									</div>	
								</li>
								<li class="bl-form-group">
									<label><em>*</em>新密码：</label>
									<div class="controls">
										<input class="fn-tinput" type="password" name="password" value="" placeholder="新密码" required id="password" data-rule-remote="php.php">
									</div>
								</li>
								<li class="bl-form-group">
									<label><em>*</em>确认新密码：</label>
									<div class="controls">
										<input class="fn-tinput" type="password" name="confirm_password" value="" placeholder="确认新密码" required equalTo="#password">
									</div>
								</li>
								<li class="bl-form-group">
									<label><em>*</em>绑定邮箱：</label>
									<div class="controls">
										<input type="email" value="" name="email" class="fn-tinput" placeholder="请输入email地址" required data-rule-email="true" data-msg-required="请输入email地址" data-msg-email="请输入正确的email地址" />
									</div>
								</li>
								<li class="bl-form-group bl-form-text">
				                <label></label>
				                <div class="controls">
				                    <label></label>
				                    <label><input name="radio1" type="radio" checked="checked" value=""> 查看并同意 《速运快递服务协议》</label>
				                </div>
				            </li>
								<li class="bl-form-group bl-form-btns">
									<label class="fn-vhid">提交：</label>
									<div class="controls">
										<a id="checkbtn" class="btn btn-danger btn-submit submitBtn col-md-3" type="submit">注册</a>
										<script type="text/javascript">
											$(function(){
												$("#checkbtn").click(function(){
													 if ($('#jsForm').validate().form()) {
														$('#jsForm')[0].submit();
										             }
												});
											});
										</script>
									</div>
								</li>
							</ul>
						</form>
					</div>
					<div class="col-md-3 introbox">
						<div class="signintro">
							<h5 class="redtext">注册成为速运会员，您可以享受更多的服务！</h5>
							<ul>
								<li class="list-group">积分奖励，电子运单专享特权</li>
								<li class="list-group">快速理赔，保价优惠</li>
								<li class="list-group">大陆偏远地区附加费减免</li>
								<li class="list-group">快件路由订阅，快件信息管理，批量下单</li>
							</ul>
						</div>
					</div>
				</div>
			</section>
		</div>
		<!--foot-->
		<footer>
			<section class="copyright size12">
				<div class="container">
					<p class="text-center">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 </p>
					<p class="text-center">京ICP备08001421号京公网安备110108007702</p>
				</div>
			</section>
		</footer>
	</body>
</html>